<template>
  <div id="pointManagement" class="pointManagement same-change-oldstyle">
    <div class="same-head-box">
      <div class="saem-seat-box">
        <div class="saem-seat-left">
          <span>当前位置：</span>
          <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item>经营管理</el-breadcrumb-item>
            <el-breadcrumb-item>积分管理</el-breadcrumb-item>
          </el-breadcrumb>
        </div>
        <div class="saem-seat-right">
          <button class="same-search-btns same-search-export" @click="RefreshFun">刷新</button>
          <!-- <button class="same-search-btns" @click="returnBack">返回</button> -->
        </div>
      </div>
      <div class="same-search-box">
        <div>
          <div class="same-search-left">
            <div class="same-left-one">
              <span class="same-search-span same-search-fisrt">结算日期：</span>
              <el-date-picker style="width:140px" v-model="date1" type="date" size="medium" value-format="yyyy-MM-dd"
                placeholder="开始日期"></el-date-picker>
              <div class="same-interval">至</div>
              <el-date-picker style="width:140px" v-model="date2" type="date" size="medium" value-format="yyyy-MM-dd"
                placeholder="结束日期"></el-date-picker>
            </div>
            <div class="same-left-one" v-if="!moveShow">
              <div class="same-left-zdshwo" :hidden="!moveBtn" @click="openMore">
                更多查询条件
                <i :class="[moveShow?'el-icon-arrow-up':'el-icon-arrow-down']"></i>
              </div>
              <el-button type="primary" size="medium" @click="findJfList()">搜索</el-button>
              <el-button type="info" size="medium" @click="reset()">重置</el-button>
            </div>
          </div>
        </div>
        <!-- 更多搜索 -->
        <div>
          <div class="same-search-left new-sear-height" ref="leftHeight">
            <div class="same-left-one">
              <span class="same-search-span">订单类型：</span>
              <el-select v-model="chooseType" placeholder="请选择" @change="choosedropdown($event)" style="width: 140px;">
                <el-option v-for="item in stateoption" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
              </el-select>
            </div>
            <div class="same-left-one" :class="[moveShow?'':'new-sear-opacity']">
              <div class="same-left-zdshwo" :hidden="!moveBtn" @click="openMore">
                收起更多查询条件
                <i :class="[moveShow?'el-icon-arrow-up':'el-icon-arrow-down']"></i>
              </div>
              <el-button type="primary" size="medium" @click="findJfList()">搜索</el-button>
              <el-button type="info" size="medium" @click="reset()">重置</el-button>
            </div>
          </div>
        </div>
      </div>
    </div>


    <div class="statistic-wrapper">
      <div class="statistic-cell">
        <div class="money-wrapper">
          <span class="span-title">收入积分</span>
          <span class="span-money">{{income_integral || 0}}</span>
        </div>
        <div class="icon-wrapper">
          <i class="el-icon-coin"></i>
          <div class="icon-circle">
            <i class="el-icon-plus"></i>
          </div>
        </div>
      </div>

      <div class="statistic-cell">
        <div class="money-wrapper">
          <span class="span-title">支出积分</span>
          <span class="span-money">{{pay_integral || 0}}</span>
        </div>
        <div class="icon-wrapper">
          <i class="el-icon-coin"></i>
          <div class="icon-circle">
            <i class="el-icon-minus"></i>
          </div>
        </div>
      </div>

      <div class="statistic-cell">
        <div class="money-wrapper">
          <span class="span-title">账户积分</span>
          <span class="span-money">{{account_integral || 0 }}</span>
        </div>
        <div class="icon-wrapper">
          <i class="el-icon-coin"></i>
        </div>
      </div>
    </div>



    <div class="head_sbox same-table-box">

      <div class="table_box">
        <h4 class="same-title-box">订单列表</h4>


        <div class="common-table-outer">
          <el-table class="common-table" v-loading="loading" header-cell-class-name="common-table-header-cell"
            :data="tableData" stripe>
             <el-table-column header-align="center" width="70" align="center" label="序号">
							<template slot-scope="scope">
								{{scope.$index+1+(pageNo-1)*pageSize}}
							</template>
						</el-table-column>

            <el-table-column align="center" prop="add_time" label="结算日期">
            </el-table-column>

            <el-table-column align="center" :formatter="formatType" label="订单类型">
            </el-table-column>

            <el-table-column align="center" :formatter="formatterRatio" label="结算比列">
            </el-table-column>

            <el-table-column align="center" label="收入/支出积分">
              <template slot-scope="scope">
                <span :class="scope.row.s_num<=0?'redColor':'greed_show'">{{scope.row.s_num}}</span>
              </template>
            </el-table-column>

            <el-table-column align="center" show-overflow-tooltip prop="remarks" label="备注">
            </el-table-column>
            <template slot="empty" v-if="isLoad">
              <div class="new-no-data-show">
                <img src="../../assets/images/no-data.png" alt="">
                <div>暂无相关数据</div>
              </div>
            </template>
          </el-table>

          <div class="same-page-inShow" v-if="tableData.length>0 && isLoad">
            <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
              :current-page.sync="pageNo" :page-sizes="pageSizesList" :page-size="pageSize"
              layout="total, prev, pager, next, jumper, sizes" :total="totalDataNumber"></el-pagination>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
  export default {
    name: "informMsg",
    data: function () {
      return {
        loading: false, //加载动画
        pageNo: 1,
        pageSize: 15,
        pageSizesList: [15, 30, 40, 50],
        tableData: [], // 返回的结果集合
        totalDataNumber: 0, // 数据的总数,---------
        pay_integral: "", // 支出积分
        income_integral: "", // 收入积分
        account_integral: "", // 账户积分
        currentPage: 2, // 当前页数
        chooseType: "", //选择类别
        stateoption: [
          {
            value: "",
            label: "全部"
          },
          {
            value: "1",
            label: "获得"
          },
          {
            value: "2",
            label: "支出"
          }
        ],
        date1: "",
        date2: "",
        isLoad: false,

        moveBtn: false, //是否暂时更多查询条件按钮按钮 搜索条件控制
        moveShow: false, //是否开启动画
        scrollHeight: "" //需要监听的高度
      };
    },
    computed: {},
    // 初始化执行
    created: function () {
      var that = this;
      this.$emit('gitHidden', true);//是否隐藏底部版权 true 隐藏 
      if (that.date1 != null) {
        var start_time = that.date1; //开始时间
        var end_time = that.date2; //结束时间
      }
      var jf_type = that.chooseType; //类型
      var page = that.pageNo; // 当前页
      var pageSize = that.pageSize; // 每页条数
      that.integralList(page, pageSize, start_time, end_time, jf_type); // 获取积分管理页面数据
    },
    inject: ["reload"],
    methods: {
      formatType(row) {
        if (row.btype == 1) {
          return "线上打水";
        } else if (row.btype == 2) {
          return "用其它";
        } else {
          return "--";
        }
      },

      formatterRatio(row) {
        return `${row.ratio * 100}%`
      },

      RefreshFun() {
        // 调用reload方法，刷新整个页面
        this.reload();
      },
      //返回
      returnBack() {
        this.$router.back(-1);
      },
      //重置
      reset() {
        this.date1 = "";
        this.date2 = "";
        this.chooseType = "";
        this.pageNo = 1;
        this.integralList(this.pageNo, this.pageSize);
      },
      //搜索
      findJfList() {
        var that = this;
        if (that.date1 != null) {
          var start_time = that.date1; //开始时间
          var end_time = that.date2; //结束时间
        }
        var jf_type = that.chooseType; //类型
        that.pageNo = 1;
        var page = that.pageNo; // 当前页
        var pageSize = that.pageSize; // 每页条数
        that.integralList(page, pageSize, start_time, end_time, jf_type);
      },
      //消费类型
      choosedropdown(Type) {
        this.chooseType = Type;
      },
      // 每页
      handleSizeChange(val) {
        var that = this;
        if (that.date1 != null) {
          var start_time = that.date1; //开始时间
          var end_time = that.date2; //结束时间
        }
        var jf_type = that.chooseType; //类型
        that.pageNo = 1;
        var page = that.pageNo; // 当前页
        that.pageSize = val; // 当前每页显示条数
        that.integralList(page, val, start_time, end_time, jf_type); // 获取积分管理页面数据
      },
      //分页
      handleCurrentChange(val) {
        var that = this;
        if (that.date1 != null) {
          var start_time = that.date1; //开始时间
          var end_time = that.date2; //结束时间
        }
        var jf_type = that.chooseType; //类型
        var pageSize = that.pageSize; // 每页条数
        that.pageNo = val;
        that.integralList(val, pageSize, start_time, end_time, jf_type); // 获取积分管理页面数据
      },

      // 获取积分管理页面数据
      integralList: function (page, pageSize, start_time, end_time, jf_type) {
        this.loading = true; //打开loading动画
        this.isLoad = false; //是否加载
        var that = this;
        // ajax请求
        that.$post({
          url: "Partner/Achievement/integralRecordList",
          data: {
            page: page,
            row: pageSize,
            start_time: start_time,
            end_time: end_time,
            type: jf_type
          },
          success: data => {
            that.isLoad = true;
            that.loading = false; //关闭动画
            if (data.code == 1000) {
              that.tableData = data.data.data;
              (that.pay_integral = data.data.pay_integral), // 支出积分
                (that.income_integral = data.data.income_integral), // 收入积分
                (that.account_integral = data.data.account_integral), // 账户积分
                (that.totalDataNumber = Number(data.data.page.total_number)); // 总的数据
            }
          }
        });
      },
      //此处获取高度必须在dom元素创建完成之后才能获取
      gitHeight() {
        //  let clientHeight=this.$refs.leftHeight.clientHeight;
        let scrollHeight = this.$refs.leftHeight.scrollHeight;
        this.scrollHeight = scrollHeight;
        scrollHeight <= 30 ? this.moveBtn = false : this.moveBtn = true;

      },
      openMore() {
        this.moveShow = !this.moveShow;
        this.$refs.leftHeight.style.height = this.moveShow ? this.scrollHeight + 'px' : 0 + 'px';
      },
    },
    mounted() {
      this.gitHeight();
      //监听高度变化
      var that = this;
      window.addEventListener("resize", function () {
        let scrollHeight = that.$refs.leftHeight && that.$refs.leftHeight.scrollHeight ? that.$refs.leftHeight.scrollHeight : that.scrollHeight;
        that.scrollHeight = scrollHeight;
      });
    },
    watch: {
      // 如果 `scrollHeight` 发生改变，这个函数就会运行 此处是为了防止用户缩小屏幕导致页面显示不全
      scrollHeight: function (val) {
        this.$refs.leftHeight.style.height = this.moveShow ? this.scrollHeight + 'px' : 0 + 'px';
      }
    }
  };
</script>
<style scoped>
  .pointManagement {
    width: 100%;
    height: 100%;
    background: #fff;
  }

  /* 头部搜索 */

  .head_sbox {
    display: flex;
    flex-direction: column;
  }

  /*统计*/

  .data_tj_jf {
    display: flex;
    flex-direction: column;
  }

  .data_box_list {
    display: flex;
    justify-content: space-between;
    width: 100%;
    height: 100px;
  }

  #pointManagement .table_box .same-title-box {
    padding-top: 10px;
  }

  .box_show_data {
    width: 32%;
    height: 100px;
    display: flex;
    height: 100px;
    border: 1px solid #dcdbd9;
    border-radius: 4px;
  }

  .l_show {
    width: 30%;
    height: 100%;
    border-radius: 4px;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .gl_color {
    background: #8f3e92;
    border: 1px solid #8f3e92;
  }

  .bl_c {
    background: #275485;
    border: 1px solid #275485;
  }

  .gr_color {
    background: #16903b;
    border: 1px solid #16903b;
  }

  .r_show {
    padding: 0px 40px;
    display: flex;
    justify-content: center;
    flex-direction: column;
  }

  .sp_style {
    color: #636261;
    margin-bottom: 10px;
    font-weight: bold;
    font-size: 16px;
  }

  .p_style {
    color: #999999;
  }

  /*列表盒子*/

  .redColor {
    color: #FF6565;
  }

  .greed_show {
    color: #399544;
  }

  #pointManagement .el-range-editor.el-input__inner {
    height: 30px;
  }

  #pointManagement .el-range-editor.el-input__inner input {
    height: auto;
  }
</style>

<style scoped>
  .statistic-wrapper {
    background-color: #FAFAFA;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0px 35px 20px;
  }

  .statistic-cell {
    background-color: #259CAA;
    color: #fff;
    flex: 1;
    margin-right: 20px;
    border-radius: 6px;
    height: 140px;
    display: flex;
    justify-content: space-around;
    align-items: center;
    position: relative;
  }

  .statistic-wrapper div:last-child {
    margin-right: 0;
  }

  .money-wrapper {
    height: 100%;
    display: flex;
    flex-flow: wrap column;
    align-items: flex-start;
    justify-content: center;
  }

  .span-title {
    color: #FFFFFF;
    opacity: 0.5;
    font-size: 14px;
  }

  .span-money {
    font-size: 30px;
    margin-top: 5px;
  }

  .icon-wrapper {
    width: 80px;
    height: 80px;
    background: rgba(225, 225, 225, 0.1);
    border-radius: 50%;
    text-align: center;
    line-height: 110px;
    position: relative;
  }

  .icon-wrapper .icon-circle {
    position: absolute;
    bottom: 18px;
    right: 12px;
    width: 34px;
    height: 34px;

    background-color: #3AA4B1;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;

  }


  .icon-wrapper .icon-circle i {
    font-size: 22px;
  }

  .icon-wrapper i {
    font-size: 60px;
    color: #D8EDF0;
  }

  .withdraw-wrapper {
    display: flex;
    flex-flow: column wrap;
    align-items: center;
  }

  .min-width-btn {
    width: 80px;
    margin: 5px;
  }
</style>
